<template>
  <div id="VIP_index" class="all">
    <div id="employee_index">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理 </el-breadcrumb-item>
        <el-breadcrumb-item>积分商品</el-breadcrumb-item>
      </el-breadcrumb>

      <br />

      <div class="table-container">
        <span style="margin-right: 83%; padding: 10px"><b>查询商品 / 添加积分商品</b></span>
        <el-divider class="custom-divider"></el-divider>
        <el-row>
          <el-col :span="18" style="display:flex; justify-content: flex-start">
            <el-input v-model="searchForm.goodName" style="width: 40%; padding: 8px" placeholder="商品名称" />
          </el-col>
          <el-col :span="6" style="text-align: center; padding: 8px 20px">
            <el-button type="primary" style="font-size: 16px" @click="searchMessage()" icon="el-icon-search"> 搜索</el-button>
            <el-button type="success" style="font-size: 16px" @click="openInputMessage">添加积分商品</el-button>

            <el-dialog title="新增积分商品" :visible.sync="inputMessage">
              <el-form :model="inputform">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input v-model="inputform.goodName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="兑换积分" :label-width="formLabelWidth">
                  <el-input v-model="inputform.vipScore" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeInputMessage(); canceladd()">取 消</el-button>
                <el-button type="primary" @click="submitInputMessage(); addopen()">确 定</el-button>
              </div>
            </el-dialog>

            <el-dialog title="更新积分" :visible.sync="updateMessage" @close="closeUpdateMessage" :close-on-click-modal="false">
              <el-form :model="updateform" ref="form">
                <el-form-item label="兑换积分" :label-width="formLabelWidth">
                  <el-input v-model="updateform.vipScore" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否是积分商品" :label-width="formLabelWidth">
                  <el-select v-model="updateform.isvipCommodity" style="width: 100%" placeholder="请选择">
                    <el-option v-for="item in addoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
               </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeUpdateMessage">取 消</el-button>
                <el-button type="primary" @click="closeUpdateMessage(); updateopen(); submitUpdateMessage();">确 定</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
      </div>

      <br />


      <!--表格数据-->
      <div class="table-container">
        <span style="margin-right: 89%; padding: 10px"><b>积分商品信息</b></span>
        <el-divider class="custom-divider"></el-divider>
        <el-table :data="tableDate" style="width: 100%" size="medium">
          <el-table-column prop="commodityId" width="250" label="商品编号"></el-table-column>
          <el-table-column width="250" prop="goodName" label="商品名称"></el-table-column>
          <el-table-column width="200" prop="price" label="商品单价"></el-table-column>
          <el-table-column width="250" prop="vipScore" label="兑换所需积分"></el-table-column>
          <el-table-column label="操作" width="250" fixed="right">
            <template v-slot="scope">
              <el-button style="font-size: 16px" type="success" @click="openUpdateMessage(scope.row)" >修改</el-button>
              <el-button style="font-size: 16px" type="danger" @click="deleteopen(scope.row)"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          background
          layout="total, prev, pager, next, jumper"
          :total="3"
          :page-size="5">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
    
<script>
import axios from 'axios';

export default {
  data() {
    return {
      empId:"",
      cusId:"",
      username: "",
      password: "",
      searchForm: {
        commodityId:"",
        goodName: "",
        price:"",
        vipScore:"",
        isvipCommodity:"",
      },
      updateform: {
        commodityId:"",
        goodName: "",
        price:"",
        vipScore:"",
        isvipCommodity:"",
      },
      inputform: {
        goodName: "",
        vipScore:"",  
      },
      deleteform: {
        commodityId:"",
        goodName: "",
        price:"",
        vipScore:"",
        isvipCommodity:"",
      },
      tableDate: [
        // {
        //   commodityId: "1",
        //   name: "保温杯",
        //   price: "99",
        //   intro: "暖暖的很贴心",
        //   inventory: "50",
        //   categoryId: "2",
        //   isvipCommodity: "1",
        //   vipScore: "300"
        // }
      ],
      inputMessage: false,
      updateMessage: false,
      checkid() {
        if (this.empId == "" || this.empId == null)
          this.$router.push('/login');
      },
      typeoptions: [
        {
          value: "1",
          label: "服装",
        },
        {
          value: "2",
          label: "食物",
        },
        {
          value: "3",
          label: "生活用品",
        },
        {
          value: "4",
          label: "娱乐用品",
        },
        {
          value: "5",
          label: "学习用品",
        },
      ],
      VIPoptions: [
        {
          value: "0",
          label: "否"
        },
        {
          value: "1",
          label: "是"
        }
      ],
      addoptions: [
        {
          value: "0",
          label: "否",
        },
        {
          value: "1",
          label: "是",
        },
      ],
      formLabelWidth: "110px",
    };
  },

  methods: {

    selDate() {
      const url = "http://localhost:8080/vipgood";
      axios.get(url, {
        params: this.searchForm
      }).then((response) => {
        console.log(response.data);
        this.tableDate = response.data.data.rows;
      })
        .catch((error) => {
          console.error('Error in selData request', error);
        });
    },

    delData() {
      let url = "http://localhost:8080/goods";
      axios.put(url,this.deleteform).then((response) => {
        console.log(response.data);
        this.selDate();
      })
        .catch((error) => {
          console.error('Error in delData request', error);
        });
    },

    inputData() {
      const url = "http://localhost:8080/goods";
      this.inputform.isvipCommodity = 1;
      axios.put(url, this.inputform
      ).then((response) => {
        console.log(response.data);
        this.selDate();
      })
        .catch((error) => {
          console.error('Error in inputData request', error);
        });
    },

    updateData() {
      const url = "http://localhost:8080/goods";
      axios.put(url, this.updateform
      ).then((response) => {
        console.log(response.data);
        this.selDate();
      })
        .catch((error) => {
          console.error('Error in updateData request', error);
        });
    },

    init(){
      this.empId = localStorage.getItem('empId');
      this.cusId = localStorage.getItem('cusId');
      this.username = localStorage.getItem('username')|| "";
      this.password = localStorage.getItem('password')|| "";
    },


    searchMessage() {
      // 发送查询请求
      this.handleSearch();
    },

    // 取消添加
    canceladd() {
      this.$message("您已取消添加");
    },

    //成功添加一个员工
    addopen() {
      this.$message({
        message: "恭喜你，添加成功！",
        type: "success",
      });
    },

    // 删除一行记录时弹出提醒框。
    deleteopen(row) {
      this.deleteform.commodityId = row.commodityId;
      this.$confirm("此操作将删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        // 发送删除请求
        this.handleDelete();
        this.searchMessage();
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },

    // 将类别那一栏的0，1，2，3，4显示为服装，食物，生活用品，娱乐用品，学习用品
    getCategoryIdText(categoryId) {
      const categoryIdMap = {
        1: "服装",
        2: "食物",
        3: "生活用品",
        4: "娱乐用品",
        5: "学习用品",
      };
      return categoryIdMap[categoryId];
    },

    // 将类别那一栏的0，1显示为否，是
    getIsVIPCommodityText(isVIPCommodity) {
      const isVIPCommodityMap = {
        0: "否",
        1: "是",
      };

      return isVIPCommodityMap[isVIPCommodity]
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    openInputMessage() {
      this.inputMessage = true;
    },
    closeInputMessage() {
      this.inputMessage = false;
    },
    submitInputMessage() {
      // 处理表单提交逻辑
      // console.log("提交表单：", this.form);
      // 发送新增请求
      this.handleInput();
      // 关闭对话框
      this.selDate();
      this.closeInputMessage();
    },

    //打开修改对话框
    openUpdateMessage(row) {
      this.updateform.commodityId = row.commodityId;
      this.updateform.vipScore = row.vipScore;
      this.updateform.isvipCommodity = row.isvipCommodity;
      this.updateMessage = true;
    },
    //关闭修改对话框
    closeUpdateMessage() {
      this.updateMessage = false;
    },
    //提交修改
    submitUpdateMessage() {
      // 处理表单提交逻辑
      // 发送修改请求
      this.handleUpdate();
      this.selDate();
    },
    //成功修改
    updateopen() {
      this.$message({
        message: "恭喜你，修改成功！",
        type: "success",
      });
    },

    

    handleSearch() {
      this.selDate();
    },

    handleInput() {
      this.inputDate();
    },

    handleUpdate() {
      this.updateDate();
    },

    handleDelete() {
      this.deleteDate();
    },
  },

  mounted() {
    this.init();
    this.checkid();
    this.selDate();
  },

  };
  </script>
  

  <style>
  .router-link-active {
    text-decoration: none;
  }
  
  .table-container {
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
  }
  .custom-divider {
    margin: 4px 0; /* 调整 el-divider 的间距 */
  }
  .custom-descriptions {
    padding-left: 10px;
    margin-bottom: 0;
  }
  .all {
    line-height: 30px;
  }
  </style>